<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      .box{width:100px;height:50px}
      .red{background: red;}
      .green{background-color: green;}
      .border{border: solid 5px black;}
      .yellow{color: yellow;}
      .align{text-align: center;}
    </style>
	</head>
	<body>
    <div id="app">
      <div v-bind:title="msg">这是一个div</div>
      <div v-bind:title="'hahah'">这是一个div</div>
      <div :title="msg">这是一个div</div>
      <div :abc="msg">这是一个div</div>
      <div class="box red"></div>
      <div class="box" :class="flag ? 'red' : 'green'"></div>
      <div class="box" :class="{red:!flag,green:flag}"></div>
      <div class="box" :class="['red', y, b, 'align']">123</div>
      <p style="background: red;">段落1</p>
      <input type="text" v-model="r" />
      <p :style="{width:'100px',height:h,background:r}">段落2</p>
      <p :style="[s1, s2]">段落3</p>
      
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    
    var vm = new Vue({
      el:"#app",
      data:{
        msg:"123123123",
        flag:true,
        y:"yellow",
        b:"border",
        h:"50px",
        r:"red",
        s1:{
          width:"80px",
          height:"50px",
          background:"#f0f"
        },
        s2:{
          textAlign:"center"
        }
      }
    })
    
  </script>
</html>
